﻿
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>OrderDels</title>
    <link href="~/lib/layui/css/layui.css" rel="stylesheet" />
    <script src="~/lib/layui/layui.js"></script>
    <script src="~/js/jquery.min.js"></script>
</head>
<body>
    <div class="demoTable">
        <form class="layui-form" onsubmit="return false;">
            订单手机号：
            <div class="layui-inline">
                <input class="layui-input" name="CustomerPhone" id="CustomerPhone" autocomplete="off">
            </div>
            类别：
            <div class="layui-inline">
                @Html.DropDownList("seltypes",ViewBag.FaHuoZhuangTai as IEnumerable<SelectListItem>,"--全部--")
            </div>
            <button class="layui-btn" data-type="reload">搜索</button>
        </form>
    </div>
    <table class="layui-hide" id="demo" lay-filter="test"></table>
    <script id="barDemo" type="text/html">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="ISFaHuoZhuangTai">是否发货</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="ISQuXiao">取消发货</a>
    </script>
    <script>
        layui.use(['table', 'layer', 'form', 'laydate', 'transfer'], function () {
            $ = layui.jquery;
            var layer = layui.layer, laydate = layui.laydate, table = layui.table, form = layui.form, transfer = layui.transfer;
            var tableIns = table.render({
                elem: '#demo'
                , height: 420
                , url: '/Customer/OrderDels' //数据接口
                , title: '用户表'
                , page: true //开启分页
                , toolbar: '#toolbarDemo' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
                , totalRow: true //开启合计行,
                , id: 'testReload'
                , cols: [[ //表头
                    { type: 'checkbox', fixed: 'left' }
                    , { field: 'DanPinName', title: '商品名称', width: 100, sort: true }
                    , { field: 'ImgUrl', title: '商品图片', width: 80, templet: '<div><img src="{{d.ImgUrl}}"/></div>' }
                    , { field: 'Price', title: '价格', width: 80}
                    , { field: 'ShopNum', title: '商品数量', width: 80 }
                    , { field: 'KeHuName', title: '客户名称', width: 100 }
                    , { field: 'CreateTime', title: '下单时间', width: 200 }
                    , { field: 'Phone', title: '订单手机号', width: 200 }
                    , { field: 'Address', title: '收货地址', width: 200 }
                    
                    ,{ field: 'FaHuoZhuangTai', title: '发货状态', width: 100}
                    , { field: 'ZhiFuZhuangTai', title: '支付状态', width: 100 }
                    , { fixed: 'right', width: 300, align: 'center', toolbar: '#barDemo' }
                ]]
            });

            table.on('tool(test)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
                var data = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
                ///编辑
                     if (obj.event === 'edit') {
                    var Id = data['Id'];
                    layer.open({
                        type: 2,
                        title: "编辑信息",
                        area: ["380px", "500px"],
                        content: '/Customer/OrderDetlEdit?Id=' + Id,


                    });
                }
                     else if (obj.event === 'ISFaHuoZhuangTai') {
                         if (data.ZhiFuZhuangTai == '已付款') {
                             $.post("/Customer/FaHuo", { Id: data.Id }, function (res) {
                                 if (res.status) {
                                     layer.msg("发货成功", function () {
                                         active["reload"].call(null);
                                         obj.del();
                                     });
                                 }
                                 else {
                                     layer.msg(res.message)
                                 }
                             }, "Json");
                         } else {
                             layer.msg("你还未付款");
                         }
                }
                     else if (obj.event === 'ISQuXiao') {
                         if (data.ZhiFuZhuangTai == '已付款') {
                             $.post("/Customer/ISFaHuo", { Id: data.Id }, function (res) {
                                 if (res.status) {
                                     layer.msg("发货成功", function () {
                                         active["reload"].call(null);
                                         obj.del();
                                     });
                                 }
                                 else {
                                     layer.msg(res.message)
                                 }
                             }, "Json");
                         } else {
                             layer.msg("已取消，无法取消发货");
                         }
                     }
                return false;

            });
            active = {
                reload: function () {

                    //执行重载
                    table.reload('testReload', {
                        page: {
                            curr: 1 //重新从第 1 页开始
                        }
                        , where: {
                        }
                    }, 'data');
                }
            };
            active = {
                reload: function () {

                    //执行重载
                    table.reload('testReload', {
                        page: {
                            curr: 1 //重新从第 1 页开始
                        }
                        , where: {
                          
                            Phone: $('#CustomerPhone').val(),
                            FaHuoZhuangTai: $('#selTypes').val()
                        }
                    }, 'data');
                }
            };
            $('.demoTable .layui-btn').on('click', function () {
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });
        });

    </script>
</body>
</html>
